<template>
  <div class="logistics">
      <h4>物流费设置</h4>
      <div class="filter-box" style="padding: 30px;
            background: #fff;
            border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                <div>
                        <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            出发地：
                            <el-input
                                placeholder="请输入订单编号"
                                v-model="orderNum" class="filter-input">
                            </el-input>
                        </div>
                       <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            买家手机号：
                            <el-input
                                placeholder="请输入手机号码"
                                v-model="buyerTel" class="filter-input">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                            目的地：
                            <el-input
                                placeholder="请输入手机号码"
                                v-model="sellerTel" class="filter-input">
                            </el-input>
                        </div>
                     
                            <el-button type="primary" @click="searchOrder()">搜索</el-button>
                    </div>
       </div>  
       <div class="container" style="border-radius: 0 0 5px 5px ">
            <el-button type="primary"  style="margin-bottom:20px;" @click="newAdd()">新增物流费</el-button>
            <el-table :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                 <el-table-column prop="logisticsName" label="运费名称" width="260" align="center"></el-table-column>
                <el-table-column prop="startSite" label="出发地" width="160" align="center"></el-table-column>
                <el-table-column prop="distSite" label="目的地" align="center"  width="220">
                </el-table-column>
                 <el-table-column prop="logisticsPrice" label="运费价格(元/斤)" align="center" width="160">
                </el-table-column>
                 <el-table-column prop="logisticsDiscount" label="运费折扣" align="center" width="220">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="order_detail(scope.$index, scope.row)">编辑</el-button>  
                    <el-button size="mini" type="danger" @click="order_detail(scope.$index, scope.row)">删除</el-button>           
                </template>
                </el-table-column>
            </el-table>
            <div class="save">
                <el-button type="primary"  style="display:block;margin: 20px auto 0;">保存</el-button>
            </div>
      </div>
      <!-- 新增物流费弹出窗 -->
      <el-dialog title="新增物流费" :visible.sync="dialogFormVisible" width="30%" top="30vh">
          <el-form :model="logisticsInfo">
            <el-form-item label="运费名称:" :label-width="formLabelWidth">
              <el-input v-model="logisticsInfo.name" auto-complete="off" class="filter-input"></el-input>
            </el-form-item>
            <el-form-item label="活动区域:" :label-width="formLabelWidth">
              <el-select v-model="logisticsInfo.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="首费:" :label-width="formLabelWidth">
              <el-input v-model="logisticsInfo.firstCost" auto-complete="off" class="filter-input"></el-input>
            </el-form-item>
            <el-form-item label="折扣:" :label-width="formLabelWidth">
               <el-input v-model="logisticsInfo.discount" auto-complete="off" class="filter-input"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
          </div>
      </el-dialog>

  </div>
</template>

<script>
export default {
    data(){
       return {
           status:'',
           info:'',
           data: [
                {
                    logisticsName:'江浙沪包邮',
                    startSite:'杭州',
                    distSite:'北京，天津',
                    logisticsPrice:'18.00',
                    logisticsDiscount:'0.95'
                },
                {
                     logisticsName:'江浙沪包邮',
                    startSite:'杭州',
                    distSite:'北京，天津',
                    logisticsPrice:'18.00',
                    logisticsDiscount:'0.95'
                },
                {
                    logisticsName:'江浙沪包邮',
                    startSite:'杭州',
                    distSite:'北京，天津',
                    logisticsPrice:'18.00',
                    logisticsDiscount:'0.95'
                },
                {
                    logisticsName:'江浙沪包邮',
                    startSite:'杭州',
                    distSite:'北京，天津',
                    logisticsPrice:'18.00',
                    logisticsDiscount:'0.95'
                }
           ],
           orderNum:'',
           buyerTel:'',
           sellerTel:'',
           logisticsInfo: {
              firstCost:'',
              discount:'',
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: ''
         },
          formLabelWidth: '120px',
          dialogFormVisible: false,
       }
    },
    created(){
        let status = this.$route.fullPath.substr(this.$route.fullPath.length-1,1);
        this.status = status;
        if(this.status == 0){
            this.info = '待处理订单';
        }else if(this.status == 1) {
            this.info = '待发货订单';
        }else if(this.status == 2) {
            this.info = '待收货订单';
        }else if(this.status == 3) {
            this.info = '待评价订单';
        }else if(this.status == 4) {
            this.info = '已完成订单';
        }else if(this.status == 5) {
            this.info = '已取消订单';
        }else if(this.status == 6) {
            this.info = '已退款订单';
        }
    },
    methods:{
       searchOrder(){
           console.log('sousuo')
       },
       newAdd(){
         this.dialogFormVisible = true;
       }
    }
 }
</script>
<style  scoped>
.logistics > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>